<script setup>
   import axios from 'axios'
   import {ref , onMounted} from 'vue'


   /**
    * axios的使用总结:  
    *   1. npm i axios 
    *   2. 导入axios工具对象  import axios from 'axios'
    *   3. 发起ajax请求
    *      axios({url:"地址",method:"方式"....})
    *   4. async + await 进行结果解析
    *      let {data:{content}} = await axios;
    */

  //发送请求获取土味情话并且展示,切换按钮
   let message = ref("没有情话!!");

  //axios自动返回一个promise对象
  let getHttpData = async ()=>{
      let {data:{code,content}} = await axios({
        method:"get",
        url:"http://forum.atguigu.cn/api/rand.qinghua?format=json"
    });
    //axios 会对结果进行二次封装  {data: 接口真正的结果 , status: 响应状态码}
    //console.log(code,content);
    message.value = content;
  }
   
  onMounted(()=>{
    getHttpData();
  });

</script>

<template>
  <div>
      {{message}} 
      <br>
      <button @click="getHttpData()">切换</button>
  </div>
</template>

<style scoped>

</style>